<template>
  <lay-layer v-model="layerRef.open"
             :title="layerRef.title"
             :area="layerRef.area"
             :shade-close="layerRef.shadeClose"
             :maxmin="layerRef.maxmin">

    <div style="padding: 20px">

      <lay-tree :data="data"
                :showCheckbox="showCheckbox"
                v-model:checkedKeys=" checked">
      </lay-tree>

    </div>


    <template v-slot:footer>
      <div class="fly-form-footer">
        <lay-button class="fly-button fly-ok-button " @click="saveAuthGrantMenuHandler">
          <lay-icon class="layui-icon-ok"></lay-icon>
          保存
        </lay-button>
        <lay-button class="fly-button fly-close-button" @click="onTapClose">
          <lay-icon class="layui-icon-close"></lay-icon>
          关闭
        </lay-button>
      </div>
    </template>


  </lay-layer>
</template>


<script setup lang="ts" name="refClazzInfo">
import {onMounted, reactive, ref} from "vue";
import {ClazzInfo} from "@/api/admin/model/ClazzInfoModel";
import AuthGrantMenuApi from "@/api/auth/AuthGrantMenuApi";
import AuthClazzMenuApi from "@/api/auth/AuthClazzMenuApi";
import {layer} from "@layui/layui-vue";

const authClazzMenuApi = new AuthClazzMenuApi();
const authGrantMenuApi = new AuthGrantMenuApi();

const data = ref([]);
const checked = ref([]);
const showCheckbox = ref(true);

const clazzCode = ref<string | undefined>('');
const clazzTitle = ref<string | undefined>('');

/* 弹窗 */
const layerRef = reactive<any>({
  open: false,
  title: '岗位信息',
  area: ['400px', '500px'], // 宽度, 高度
  disabled: false,
  shadeClose: false,
  maxmin: false,
  submit: true,
})

//显示弹框
const open = (row?: ClazzInfo) => {
  layerRef.title = '【' + row?.clazzTitle + '】岗位权限设置';

  clazzCode.value = row?.clazzCode;
  clazzTitle.value = row?.clazzTitle;

  authGrantMenuApi.findMenuElementTree(row?.clazzCode).then(res => {
    checked.value = res.data.checked;
    data.value = res.data.data;
  })
  layerRef.open = true;
};


/**
 * 关闭按钮
 */
const onTapClose = () => {
  layerRef.open = false;
}

const saveAuthGrantMenuHandler = () => {

  let menuId = checked.value.join(',');

  let data = {
    /** 岗位代码 */
    clazzCode: clazzCode.value,
    /** 岗位名称 */
    clazzTitle: clazzTitle.value,
    /** 菜单ID/资源ID */
    menuId: menuId,
  }

  authClazzMenuApi.saveInfo(data).then(res => {
    layer.msg(res.msg, {time: 1500, icon: 1}); // 操作成功提示
    onTapClose();
  })

}


//在组件中，属性和方法，只能对当前template,
//外部需要使用的时候，需要使用 defineExpose 暴露出去给父组件
defineExpose({
  open
});


</script>


<style scoped>

</style>